<template>
    <div :class="className" :style="{height:hght,width:wid}" />
</template>

<script>

import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
// import resize from './mixins/resize'
export default {
    name: 'CompassBoardRound',
    props: {
        className: {
            type: String,
            default: 'compass'
        },
        wid: {
            type: String,
            default: '300px'
        },
        hght: {
            type: String,
            default: '300px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        yieldRate : {
            type : String,
            default : 0
        }
    },
    data() {
        return {
            // yieldRate: [],
            echartsOption: {
                // title: {
                // text: '功能名称，可添加该区块功能名，此处不需要'
                // },
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [
                    {
                        name: '罗盘',
                        type: 'gauge',
                        radius : "50%",
                        min: -180,   // 最小值
                        max: 180,  // 最大值
                        startAngle: -180,
                        endAngle: 180,
                        precision: 0,  // 小数精度，默认为0，无小数点
                        clockwise: true,
                        title: {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                // fontWeight: 'bolder',
                                fontSize: 15,
                                // fontStyle: 'italic',
                                color: "black"
                            }
                        },
                        detail: {
                            formatter: '{value}',
                            fontSize: 15,// 文字的字体大小,默认 15。
                            offsetCenter: [0, "120%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        },
                        data: [
                            {
                                value: 0
                            }
                        ],
                        pointer: {
                            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                            width: 4,
                            length: '300px',
                            offsetCenter: [0, '150px'],
                            itemStyle: {
                                color: '#C0911F',
                                shadowColor: 'rgba(0, 0, 0, 0.3)',
                                shadowBlur: 8,
                                shadowOffsetX: 2,
                                shadowOffsetY: 4
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                            show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                            lineStyle: {            // 仪表盘轴线样式。

                                color: [
                                    [1, '#C0911F']
                                ],  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                // opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 5,                  //轴线宽度,默认 30。
                                // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            }
                        },
                    }
                ]
            }
        }
    },
    created () {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.compass) {
            return
        }
        this.compass.dispose()
        this.compass = null
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.compass = echarts.init(this.$el)
        // this.compass = echarts.init(this.$el, 'macarons')
        //绘制图表，option是图表数据
        this.compass.setOption(this.echartsOption)
        setInterval(this.addData, 3000);
    },
    methods: {
        initChart () {
            // 基于准备好的dom，初始化echarts实例
            this.compass = echarts.init(this.$el)
            //绘制图表，option是图表数据
            this.compass.setOption(this.echartsOption)
        },
        addData : function(New) {
            this.$axios.get(this.GLOBAL.serverIp + '/api/compassBoard/').then((res) => {
                this.yieldRate = (res.data.data * 1).toFixed(3)
                this.echartsOption.series[0].data[0].value = this.yieldRate
                this.compass.setOption(this.echartsOption)
            })
        },
    },
    watch : {
        // yieldRate : function(New, Old) {
        //     console.log ( New );
        //     this.addData(New);
        // }
    }
};
</script>

<style scoped>

.AxisData {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25%;
    text-shadow: none;
}

.self_slider {
    width: 90%;
    margin: 20px auto 0;
    height: 90px;
}
.el-slider__marks-text span {
    display: inline-block;
    height: 17px !important;
    overflow: hidden;
}
>>> .marks {
    text-align: center;
    position: relative;
    font-size: 30px;
    top : -2px;
}
>>> .marks-line {
    position: absolute;
    left: -12px;
    top : 0px;
    font-size: 30px;
}
>>> .marks-line2 {
    position: absolute;
    left: -30px;
    top : 0px;
    font-size: 30px;
}
>>> .marks-line3 {
    position: absolute;
    left: -12px;
    top : -16px;
    font-size: 30px;
}
>>> .marks-line4 {
    position: absolute;
    left: -30px;
    top : -16px;
    font-size: 30px;
}
>>> .marks-value {
    position: absolute;
    left: -65px;
    top: -16px;
    font-size: 20px;
}
>>> .marks-value0 {
    position: absolute;
    left: -50px;
    top: 0px;
    font-size: 20px;
}
>>> .marks-valuer {
    position: absolute;
    left: 30px;
    top: 0px;
    font-size: 20px;
}
>>> .el-slider__runway {
    height: 0px;
    width: 0px;
}
>>> .el-slider.is-vertical .el-slider__runway {
    width: 3px;
    background-color: #C0911F;
}
>>> .el-slider__bar {
    height: 0px;
    width: 0px;
    opacity: 0;
}
>>> .el-slider.is-vertical .el-slider__bar {
    width: 0px;
    opacity: 0;
}
>>> .el-slider__stop {
    opacity: 0;
    height: 0px;
    width: 0px;
}
>>> .el-slider__button-wrapper {
    left: 22px;
}
>>> .el-slider__button {
    border: none;
    background-color: transparent;
}
>>> .el-slider__button::after, .el-slider__button.dragging::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: #C0911F;
    left: 5px;
    top: 5px;
    transform: rotate(90deg);
}
>>> .el-slider__button-wrapper .el-tooltip, .el-slider__button-wrapper::after {
    display: block;
}
>>> .el-slider__button.hover, .el-slider__button.dragging {
    transform: scale(1.0);
}
>>> .el-slider__input {
    margin-top: 3px;
    width: 50%;
    position: absolute;
    top: 25%;
    left: 170px;
}
>>> .el-slider__runway.show-input {
    margin-right: 0;
    width: auto;
}

>>> .el-slider.is-vertical .el-slider__marks-text {
    left: 2.5px;
}
</style>
